<template>
	<view class="content">
		<view class="coupon-list-n">
			<view class="fix_dot" v-for="(item,index) in goodsList" :key="index">
				<view class="coupon">
					<view class="coupon-img">
						<img :src="item.productPic" alt="">
					</view>
					<view class="coupon-right">
						<view class="c-title" v-if="item.type == 0">满{{item.minPoint}}元减{{item.amount}}元</view>
						<view class="c-title" v-if="item.type == 1">折扣上限{{item.discountCeiling}}元</view>
						<view class="c-title" v-if="item.type == 2">立减{{item.amount}}元</view>
						<view class="c-sub">{{item.name}}</view>
						<view class="c-time">{{item.startTime}}-{{item.endTime}}</view>
						<!--<view class="c-integral">12积分</view>-->
						<view class="c-p">
							<!-- <view class="progress">
								<view class="pro" :style="'width:'+parseInt((item.receiveCount/item.publishCount)*100)+'%'">&nbsp;</view>
								<view class="info">已抢{{parseInt((item.receiveCount/item.publishCount)*100)}}%</view>
							</view> -->
							<view class="btn" v-if="item.got!=='1'" @click="getCoupon(item.id,index)">立即领取</view>
							<view class="btn" v-if="item.got=='1'" @click="goBuy(item.productId)">去购物</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fix_dot" v-if="false">
				<view class="coupon">
					<view class="coupon-img">
						<img src="/static/index/pic1@2x.png" alt="">
					</view>
					<view class="coupon-right">
						<view class="c-title">20元优惠券</view>
						<view class="c-sub">墨西哥牛油果</view>
						<view class="c-time">2019.06.15-2019.06.18</view>
						<!--<view class="c-integral">12积分</view>-->
						<view class="c-p">
							<view class="progress">
								<view class="pro">&nbsp;</view>
								<view class="info">已抢60%</view>
							</view>
							<view class="btn">立即领取</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<navigator url="/pages/coupon/index" open-type="redirect" class="bottom-navigation">
			<image src="/static/mine/youhuiquan@2x.png" class="youhuiImg"></image>
			我的优惠券
			<image src="/static/common/arrow-right.png"></image>
		</navigator>
	</view>
</template>

<script>
    import {_allCoupon,_addCoupon} from '../../common/vmeitime-http/mem.js';
    import utils from '../../common/utils/util'
	export default {
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				headerPosition:"fixed",
				headerTop:"0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0, 
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: []
			};
		},
		onShareAppMessage(res) {
		      return {
		        title: '拉美购——让拉美触手可及',
		        path: '/pages/coupon/center'
		      }
		    },
		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.cateId = options.tid;
			this.loadData();
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			// this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			// this.loadData();
		},
		methods: {
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
                let tempData = await _allCoupon();
                this.goodsList = tempData.data.data;
                this.goodsList.forEach(item=>{
                    item.startTime = utils.formatDate.format(new Date(item.startTime),'yyyy.MM.dd');
                    item.endTime = utils.formatDate.format(new Date(item.endTime),'yyyy.MM.dd');
				});
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				
				// let goodsList = await this.$api.json('goodsList');
				if(type === 'refresh'){
					this.goodsList = [];
				}

				// this.goodsList = this.goodsList.concat(goodsList);
				
				//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
				this.loadingType  = this.goodsList.length > 20 ? 'nomore' : 'more';
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
			},
			/*领取优惠卷*/
			async getCoupon(id,index){
			    let para = {
                    couponId:id
				}
				let that = this;
			    // debugger
			  let tempData = await _addCoupon(para) ;
			    if(tempData.data.code==200){
                    that.goodsList[index].got = '1';
                    that.goodsList = JSON.parse(JSON.stringify(that.goodsList));
			        this.$api.msg("优惠卷领取成功！");
				}else{
				}
			},
			//详情
			navToDetailPage(item){
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				});
			},
			/*去购物*/
            goBuy(productId){
                if(productId){
                    uni.navigateTo({
                    	url: `/pages/product/product?id=${productId}`
                    })
				}else{
					uni.switchTab({
						url:`/pages/index/index`
					})
				}
			},
			stopPrevent(){}
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
	}
	.content{
		/*padding-top: 96upx;*/
	}
	.integral-title{
		color: $font-color-dark;
		font-size: $font-base + 2upx;
		text-align: center;
		padding: 29upx 0;
		span{
			font-weight: bold;
		}
		text{
			color: $uni-color-primary;
			font-size: 50upx;
			font-weight: bold;
		}
	}
	/*优惠券列表*/
	.coupon-list-n{
		padding: 30upx;
		padding-bottom: 130upx;
	}
	.fix_dot{
		overflow: hidden;
		position: relative;
		margin-bottom: 20upx;
		.dot{
			position: absolute;
			width: 20upx;
			height: 20upx;
			background: #ffffff;
			border-radius: 50%;
			border: 2upx solid $uni-color-primary;
			left: 280upx;
			top: -10upx;
			&.b{
				top:281upx;
			}
		}
	}
	.coupon{
		display: flex;
		background: #ffffff;
		padding: 16upx;
		/*border-radius: 5upx;*/
		.coupon-img{
			width: 254upx;
			height: 254upx;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.coupon-right{
			font-size: 24upx;
			color: #989898;
			display: flex;
			flex-direction: column;
			justify-content: center;
			line-height: 47rpx;
			flex: 1;
			padding-left: 20upx;
			.c-title{
				font-size: 30upx;
				color: $font-color-dark;
			}
			.c-sub{
				font-size: 24upx;
				color: #656565;
			}
			.c-integral{
				font-size: 30upx;
				font-weight: bold;
				color: $uni-color-primary;
			}
			.c-time{
				margin-bottom: 20upx;
			}
			.c-p{
				/*display: flex;*/
				line-height: 30upx;
				overflow: hidden;
				.progress{
					overflow: hidden;
					position: relative;
					display: inline-block;
					color: $uni-color-primary;
					border: 2upx solid $uni-color-primary;
					border-radius: 20upx;
					padding: 0 30upx;
					margin-top: 16upx;
					.pro{
						position: absolute;
						width: 60%;
						height: 100%;
						left: 0;
						background: #70B290;
						z-index: 0;
					}
					.info{
						position: relative;
						z-index: 1;
					}
				}
				.btn{
					width: 164upx;
					height: 60upx;
					text-align: center;
					line-height: 60upx;
					display: inline-block;
					background: $uni-color-primary;
					color: #ffffff;
					font-size: 26upx;
					border-radius: 5upx;
				}
			}
		}
	}
	.bottom-navigation{
		width: 100%;
		height: 110upx;
		position: fixed;
		bottom: 0upx;
		background: #ffffff;
		color: #017F01;
		font-size: 32upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.youhuiImg{
			margin-right: 20upx;
		}
		image{
			width: 50upx;
			height: 50upx;
			margin-left: 10upx;
		}
	}
</style>
